<template>
	<z-paging bg-color="#F4F6F8" ref="paging" v-model="list" @query="getList" empty-view-text="暂无数据"
		:empty-view-img-style="{width:'150rpx',height:'150rpx'}" :empty-view-title-style="{marginTop: '30rpx'}">
		<template #refresher="{refresherStatus}">
			<!-- 此处的custom-refresh为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，下拉刷新就显示什么view -->
			<custom-refresher :status="refresherStatus" />
		</template>
		<view class="">
			<view class="font-28" v-if="list.length > 0">
				<up-checkbox-group v-model="checkboxValue" placement="column">
					<view v-for="item in list" :key="item.id" class="mar-bottom-30 color-646464 bg-white pad-30">
						<up-checkbox placement="column" :name="item.order_no"
							:customStyle="{marginTop: '8rpx',width:'100%'}" size="36rpx" labelSize="26rpx"
							shape="circle">
							<template #label>
								<view class=" Zmar-left-20">
									<view class="betweenX">
										<view>水表编号: {{item?.water_meter_info?.code}}</view>
										<view class="font-w-500 color-error">{{item.amount}}</view>
									</view>
									<view class="mar-top-10">订单号: {{item.order_no}}</view>
									<view class="mar-top-10">时间:
										{{timeFormat(item.created_at, 'yyyy-mm-dd hh:MM:ss')}}
									</view>
								</view>
							</template>
						</up-checkbox>

					</view>
				</up-checkbox-group>
			</view>
		</view>
		<template #bottom>
			<view class="pad-24">
				<view @click="submit" class="button-style">确认开票</view>
			</view>
		</template>
	</z-paging>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { orderList } from '@/api/user.js';
	import { monthlyReport } from '@/api/index.js';
	import { timeFormat } from '@/node_modules/uview-plus';

	const list = ref([]);
	const param = ref({});
	const paging = ref(null);
	const checkboxValue = ref([]);

	// 确认提交
	const submit = () => {
		if (checkboxValue.value.length > 0) {
			uni.setStorageSync('saveId', checkboxValue.value);
			uni.navigateBack();
		} else {
			uni.$u.toast('请选择要开的票');
		}
	}

	// 获取列表数据
	const getList = (page, pageSize) => {
		orderList({
			page,
			ps: pageSize,
			applied_invoice: 2,
			pay_status: 3,
			order_type: 2
		}).then(res => {
			if (res?.code == 200) {
				paging.value.complete(res.data.data);
			} else {
				paging.value.complete(false);
			}
		})
	}

	onLoad((option) => {
		param.value = option;
	})
</script>

<style scoped>
	.button-style {
		padding: 21rpx 0;
		text-align: center;
	}

	.list {
		width: 100%;
	}

	/deep/.u-checkbox__label-wrap {
		width: 100%;
	}
</style>